
<template>
  <div class="app-container">
    <Card  dis-hover class="task-card">
      <el-form :inline="true" :model="queryForm" class='c-form-condensed' label-width='68px' inline size='mini'>

        <el-form-item label='状态' prop='status' label-width='48px'>
          <el-select v-model='statusDefault' clearable>
            <el-option v-for="item in statusList" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <Modal
        :mask-closable="false"
        title="添加委托"
        :transfer="false"
        v-model="addModel"
        width="80%">

        <!--              <div slot="footer"  v-if="addForm.id.length==0">-->
        <!--                <Button type="primary" @click="handleSubmit('addForm')">确定</Button>-->
        <!--                <Button @click="handleReset('addForm')">取消</Button>-->

        <!--              </div>-->

      </Modal>

      <el-row class="table_form">
        <el-col>
          <el-table
            :data="tableData"
            size="mini"
            style="width: 100%"
            :height="tableHeight"
          >
            <el-table-column
              prop="name"
              label="名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="modelKey"
              label="流程key"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.defId==null || scope.row.defId==''" type="danger" class="tag">未发布</el-tag>
                <el-tag v-else type="success" class="tag">已发布</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="version"
              label="版本号"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="defId"
              label="定义id"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="mainProcess"
              label="是否主版本"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.mainProcess == '1'" type="error">是</el-tag>
                <el-tag v-else type="primary">否</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              prop="operate"
              label="操作"
              fixed="right"
              width='250'
            >
              <template slot-scope="scope">
                <el-button type="text" @click="viewImage(scope.row.id)" size="small">查看流程</el-button>

                <el-button  v-if="scope.row.mainProcess=='0'"  size="mini" type="text"  @click="setVersion(scope.row.id)">设为主版本</el-button >
                <el-divider  v-if="scope.row.mainProcess=='0'"  direction="vertical"></el-divider>

                <el-button  v-if="scope.row.mainProcess=='0'"   type="warning" size="text"  @click="del(scope.row.id)">删除</el-button >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="queryForm.page"
          :page-size="queryForm.pageSize"
          layout="prev, pager, next, sizes, total, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </Card>

    <Modal :mask-closable="false" v-model="viewImageModeler" fullscreen title="快照图" :transfer="false">
      <iframe width="100%" height='100%' frameborder='0' align='center' allowfullscreen='true' allow="autoplay"
              id='iframe2' :src="viewImageModelerTmpSrc"></iframe>
      <div slot="footer"></div>
    </Modal>
  </div>


</template>

<script>
  import {getVersionManagerByKey,setModelerVersion,deleteModelerVersion} from "@/api/analy";
  import Footer from '../../../common/footer';

  export default {
    name: 'Task',
    components:{
      Footer
    },

    data() {
      return {
        viewImageModeler: false,
        tableData: [],
        tableHeight: 450,
        queryDate:[],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        addModel: false,
        chartData: {},
        sellerId: 0,
        shopName: [],
        statusDefault: '',
        statusList:[
          {label:"未发布",value:"0"},
          {label:"已发布",value:"1"},
        ],
        queryForm: {
          modelKey: "",
          modelId: "",
          status: "",
          page: 1,
          limit: 10,
          pageSize: 10,

          type: 4,
        },
        categoryData: [
        ]
      }
    },
    mount() {

      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      var query= this.$route.query;
      this.queryForm.modelKey=query.modelKey;
      this.getData()
    },
    methods: {
      viewImage: function (id) {
        if (id) {
          var url = process.env.VUE_APP_BASE_BPM_API + "view/def.html?&modelId=" + id
          this.viewImageModelerTmpSrc = url;

        }
        this.viewImageModeler = true;

      },
      setVersion:function(id){
        this.queryForm.modelId=id;
        setModelerVersion(this.queryForm).then((response) => {
          this.tableData = response.data

          this.total = parseInt(response.count);
          this.queryForm.modelId=""
          this.getData();
        })
      },
      del:function(id){

        var ids=[];
        ids.push(id);
        deleteModelerVersion({ ids : ids }).then((response) => {
          if (response.code==0){
            this.getData()
          }
        })
      },
      hisVersionDefDetail:function(data){
      this.addModel=true
      },
      queryFormCreateTime:function(e){
        this.queryForm.tmpCreateTime=e;
      },
      queryFormEndTime:function(e){
        this.queryForm.tmpEndTime=e;
      },
      queryMethod:function(){
        var name=  this.queryForm.name;
        var tmpCreateTime=  this.queryForm.tmpCreateTime;
        if (tmpCreateTime ){
          if (tmpCreateTime[0]){
            this.queryForm.createTime=tmpCreateTime[0]+" - "+tmpCreateTime[1];
          }
        }
        getVersionManagerByKey(this.queryForm).then((response) => {
          this.tableData = response.data

          this.total = parseInt(response.count);

        })

      },

      getData: function () {
        getVersionManagerByKey(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {
        this.queryForm.status=this.statusDefault;
        this.getData()
        this.queryForm.status=""
      },
      reset() {
        this.statusDefault = "";
        this.queryForm.status=""
        this.getData()

      }

    }

  }

</script>
<style lang="scss">
  .task-card{
    margin-top: 10px;
  }
  .c-form-condensed .el-form-item{
    margin-bottom: 3px;
    .el-input{
      max-width: 150px;
    }
  }
</style>
<style lang="scss" scoped>
  /* button color */
  .el-button--cyan.is-active,
  .el-button--cyan:active {
    background: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
  }

  .el-button--cyan:focus,
  .el-button--cyan:hover {
    background: #48D1CC;
    border-color: #48D1CC;
    color: #FFFFFF;
  }

  .el-button--cyan {
    background-color: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
  }

  /* text color */
  .text-navy {
    color: #1ab394;
  }

  .text-primary {
    color: inherit;
  }

  .text-success {
    color: #1c84c6;
  }

  .text-info {
    color: #23c6c8;
  }

  .text-warning {
    color: #f8ac59;
  }

  .text-danger {
    color: #ed5565;
  }

  .text-muted {
    color: #888888;
  }

  /* image */
  .img-circle {
    border-radius: 50%;
  }

  .img-lg {
    width: 120px;
    height: 120px;
  }

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
  }

  /* 拖拽列样式 */
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .top-right-btn {
    position: relative;
    float: right;
  }

  .main-div {
    background-color: white !important;
  }

</style>
